<template>
    <!-- sort-change方法为组件中的方法 -->
    <el-table :data="nodes" row-key="id" border 
    default-expand-all 
    @sort-change="sortChange">
        <el-table-column prop="id" label="编号" sortable
         width="100"> </el-table-column>
        <el-table-column prop="name" label="节点名称"> </el-table-column>
        <el-table-column prop="ename" label="节点标识"> </el-table-column>

        <el-table-column label="是否菜单">
 <!-- 定义插槽（slot），用于自定义表格列中的内容。slot-scope指令将当前行的数据对象传递给插槽，可以通过row变量来访问该数据对象。 -->
            <template slot-scope="{ row }">
                <el-tag v-if="row.meun === '1'" size="medium" type="success">是</el-tag>
                <el-tag v-else size="medium" type="info">否</el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="route" label="路由地址"> </el-table-column>
        <el-table-column label="icon图标">
            <template slot-scope="{ row }">
                <i style="font-size: 18px" :class="[row.icon]"></i>
            </template>
        </el-table-column>

        <el-table-column prop="remark" label="节点备注"> </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="{ row }">
                <el-button type="primary" size="mini" @click="editNode(row.id)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>


<script>
export default {
    //接受父组件传来的数据和方法
    props: ['nodes', 'loadData'],
    data() {
        return {
        }
    },
    methods: {
        editNode(nodeid) {

        },
        // 点击排序触发事件
        sortChange(column) {
            let { prop = 'id', order = 'descending' } = column    //解构column中的属性和值
            // ascending / descending => mysql中排序字段 asc / desc
            order = order == 'descending' ? 'desc' : 'asc'     //进行重新赋值，对接数据库操作
            console.log(prop,order);
            this.loadData(prop, order)    //根据传参更新排序后的数据列表     
        }
    }
}
</script>


<style scoped></style>